<template>
    <div class="infomation2">
        <!-- 主体部分 -->
        <div class="container">
            <div class="headtext_box">
                <strong class="headtext">请填写教育经历</strong>
            </div>
            <!-- 表单部分 -->
            <div class="from_box">
                <el-form ref="message" :model="message" size="small" :rules="rules">
                    <el-form-item label-width="0" prop="schoolName">
                        <el-input v-model="message.schoolName" placeholder="请输入学校名称"></el-input>
                    </el-form-item>
                    <el-form-item label-width="0">
                        <el-select v-model="message.inrollmentYear" placeholder="请选择入学年份" style="width: 100%;">
                            <el-option 
                            v-for="item in yearsOption"
                            :key="item.value"
                            :label="item.lable" 
                            :value="item.value">
                        </el-option>
                        </el-select>
                    </el-form-item>
                        <el-form-item label-width="0">
                        <el-select v-model="message.graduationYear" placeholder="请选择毕业年份" style="width: 100%;">
                            <el-option 
                            v-for="item in yearsOption"
                            :key="item.value"
                            :label="item.lable" 
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="message.profession" placeholder="请输入所学专业"></el-input>
                    </el-form-item>
                    <el-form-item label-width="0" prop="education">
                        <el-select v-model="message.education" placeholder="请选择学历" style="width: 100%;">
                        <el-option 
                        v-for="item in educationOptions"
                        :key="item.key"
                        :label="item.value" 
                        :value="item.value">
                    </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 按扭部分 -->
            <div class="btn-box">
                <div class="btn_last"><button @click="jump_last()">上一步</button></div>
                <div class="btn_next"><button @click="jump_next('message')">下一步</button></div>
            </div>
            <!-- 信息文本 -->
             <div class="message_text">
                <a href="">下载拉勾客户端，HR消息提醒更及时</a>
             </div>
        </div>
    </div>
</template>

<script>
import "@/assets/css/global.css"

export default {
    name: "Infomation2",
    data() {
        return {
            message: {
                schoolName:'',
                inrollmentYear:'',
                graduationYear:'',
                profession:'',
                education:'',
            },
            yearsOption: this.yearOptions(),
            educationOptions: [
                {key:1,value:"博士"},
                {key:2,value:"研究生"},
                {key:3,value:"本科"},
                {key:3,value:"大专"},
                {key:3,value:"高中"},
            ],
            rules:{
                schoolName:[
                    { required: true, message: ' ', trigger: 'blur' },
                ],
                education:[
                    {  required: true, message: ' ', trigger: 'change' }
                ],    
            }        
        }
        
    },
    methods:{
        jump_last() {
            this.$router.push('/infomation')
        },
        jump_next(form){
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.$store.dispatch('updataExperience',this.message)
                    console.log(this.$store.state.experience)
                    this.$router.push('/infomation3')
                }else{
                    return false;
                }
            });
        },
        yearOptions(){
            const currentYear = new Date().getFullYear();
            const years = [];
            for (let y = currentYear; y >= 1990; y--) {
            years.push({ label: `${y}年`, value: y.toString() });
            }
            return years;
        }
    }
}
</script>

<style scoped>

    .infomation2 {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(5, 171, 133, 1);
    }

    .container {
        height: 75%;
        width: 30%;
        border-radius: 4px;
        background-color: white;
    }

    .headtext_box {
        margin-top: 30px;
        margin-bottom: 25px;
        text-align: left;
    }

    .headtext {
        margin: 40px;
        color: rgba(80, 80, 80, 1);
    }

    .from_box {
        width: 100%;
        height: 50%;
        padding: 10%;
        display: flex;
        flex-direction: column;
    }

    .btn-box{
        display: flex;
        height: 9%;
        padding: 0 10%;
    }

    .btn_last{
        flex: 1;
        padding: 10px 0px;
    }

    .btn_next{
        flex: 3;
        padding: 10px;
        padding-right: 0px;

    }

    button{
        width: 100%;
        height: 100%;
        border-radius: 3px;
        font-size: 14px;
        color: white;
        background-color: rgba(0, 179, 138, 1);
        border: none;
    }

    button:hover{
        cursor: pointer;       
    }

    .message_text{
        font-size: 14px;
        margin-top: 10%;
        text-align: center;
    }

    a{
        color: rgba(0, 179, 138, 1);
        text-decoration-color: rgba(0, 179, 138, 1);
    }

</style>